<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>3_回调ref调用的次数</title>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="root"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom 用于支持react操作dom -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel 将js转换成jsx -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- type="text/babel" 表示写的是 jsx 使用babel 翻译 -->
    <script type="text/babel">
      // 1.创建组件
      class MyComponent extends React.Component {
        state = { isHot: true };
        render() {
          return (
            <div>
              <h2>今天天气很{this.state.isHot ? "炎热" : "凉爽"}</h2>
              {/* <input ref={e => {this.input1 = e;console.log("input1",e);}} type="text"/> */}
              <input ref={this.saveInput} type="text" />
              <button onClick={this.clickAlertData}>点我输出数据</button>
              <input
                ref={(e) => (this.input2 = e)}
                onBlur={this.blurAlertData}
                type="text"
                placeholder="失去焦点弹出数据"
              />
              <button onClick={this.changeWeather}>点我切换天气</button>
            </div>
          );
        }
        saveInput = (e)=>{
          this.input1 = e
          console.log("input1",e)
        }
        changeWeather = () => {
          this.setState({ isHot: !this.state.isHot });
        };

        clickAlertData = () => {
          alert(this.input1.value);
        };

        blurAlertData = () => {
          alert(this.input2.value);
        };
        /*
              关于回调refs的说明
              如果ref回调函数是以内联函数(ref={e => {this.input1 = e;console.log("input1",e);}})的方式定义的，
              在更新过程中它会被执行两次，第一次传入参数nu11,，然后第二次会传入参数DOM元素。这是因为在每次渲染时会创建一个新的函数实
              例，所以React清空旧的ref并且设置新的。通过将ref的回调函数定义成class的绑定函数的
              方式可以避免上述问题，但是大多数情况下它是无关紧要的。
            */
      }

      // 2.渲染页面到元素
      ReactDOM.render(<MyComponent />, document.getElementById("root"));
    </script>
  </body>
</html>
